<template>
	<div class="index">
		<div class="sreePublic">
			<div id="" style="text-align: center;">
				<em class="iconfont" @click="vfun_back">&#xe61f;</em>
			</div>
			支付密码设置
		</div>
		<div>
			<div class="delivery">
				<ul>
					<li>
						<span>手机号：</span>
						<input v-model="phone2" class="phone" disabled="disabled" />
					</li>
					<li>
						<span>验证码：</span>
						<input v-model="rendCode" placeholder="请输入验证码" />
						<span class="spanphone" @click="vfun_huoqu" :class="{active:vue_phone_verifyBtn}">{{vue_ver}}</span>
					</li>

					<li>
						<span>支付密码：</span>
						<input type="password" ref="password" placeholder="限6位数字" v-model="operatorPayPassword" @keyup="vfun_passnum" />
						<a class="yanpass" @click="vfun_yan">
							<em class="iconfont" v-if="vue_yan">&#xe6e3;</em>
							<em class="iconfont" v-else>&#xe8ed;</em>
						</a>
					</li>
				</ul>
			</div>

			<div class="footer">
				<a @click="addDelivery" :class="{activeBtn:vue_passbtn}">保存</a>
			</div>
		</div>
	</div>
</template>

<script>
	import * as address from '../../assets/data/address';
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui'; //引入弹框
	export default {
		name: 'addDelivery',
		data() {
			return {
				vue_passbtn: true,
				vue_yan: true,
				vue_ver: '获取验证码',
				vue_phone_verifyBtn: false,
				phone: '',
				phone2: '',
				operatorPayPassword: '',
				rendCode: '',
				operatorPayPassword2: '',
			}
		},

		methods: {

		  //输入支付密码（按键松开触发）
			vfun_passnum() {
				if(this.rendCode != '' && this.operatorPayPassword.length == 6) {
					this.vue_passbtn = false;
				} else {
					this.vue_passbtn = true;
				}
			},

			//密码以（文本）或（点）形式出现
			vfun_yan() {
				this.vue_yan = !this.vue_yan;
				if(this.vue_yan) {
					this.$refs['password'].type = "password";
				} else {
					this.$refs['password'].type = "text";
				}
			},

			//点击获取验证码
			vfun_huoqu() {
				let num = 60;
				this.vue_phone_countDown = setInterval(() => {
					this.vue_ver = num + "后重新获取";
					this.vue_phone_verifyBtn = true;
					num--;
					if(num <= -1) {
						clearInterval(this.vue_phone_countDown);
						this.vue_phone_verifyBtn = false;
						this.vue_ver = "重新获取";
					}
				}, 1000);
				this.axios({
					method: 'PATCH',
					url: "/v3/member/operators/" + this.phone + "/sendPhoneVerifyCode",
					data: {}
				}).then((res) => {

				}).catch((err) => {
					Toast({
						message: err.response.data,
						iconClass: 'fontSize iconfont icon-shibai'
					});
				});
			},

			//点击（保存）按钮
			addDelivery() {
				if(this.rendCode == '') {
					Toast({
						message: '请填写验证码',
						iconClass: 'fontSize iconfont icon-shibai'
					});
					return false;
				}
				if(this.operatorPayPassword != '') {
					let str = this.Public.rules.pass;
					if(str.test(this.operatorPayPassword) != true) {
						Toast({
							message: '支付密码为6位数字',
							iconClass: 'fontSize iconfont icon-shibai'
						});
						return false;
					}
				} else {
					Toast({
						message: '请填写支付密码',
						iconClass: 'fontSize iconfont icon-shibai'
					});
					return false;
				}
				this.axios({
					method: 'PUT',
					url: "/v3/member/operators/" + this.rendCode + "/" + this.md5(this.operatorPayPassword).toUpperCase() + "/settlePayPassword",
					data: {}
				}).then((res) => {
					this.Public.vFun_openSuccess('设置成功！');
          history.back();
				}).catch((err) => {
					Toast({
						message: err.response.data,
						iconClass: 'fontSize iconfont icon-shibai'
					});
				});
			},

			//返回上个页面
			vfun_back() {
				history.back();
			},

			//初始化页面手机号码
			memberphone() {
				this.axios({
					method: 'GET',
					url: "/v3/basic/members/" + localStorage.getItem("memberCode"),
					data: {}
				}).then((res) => {
					this.phone = res.data.operatorPhone;
					this.phone2 = this.phone.substr(0, 3) + '****' + this.phone.substr(7);
				}).catch((err) => {});
			}
		},

		activated() {
			this.memberphone();
		},

		created() {
			this.memberphone();
		},
		mounted() {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	* {
		transition: 0.2s;
	}

	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	.index {
		box-sizing: border-box;
		margin-bottom: 1.5rem;
	}

	.delivery {
		margin-top: 1.2rem;
	}

	.delivery li {
		border-bottom: 1px solid #e7e7e7;
		box-sizing: border-box;
		background: #fff;
		height: 1.5rem;
		line-height: 1.5rem;
		position: relative;
		width: 90%;
		margin: 0 auto;
		font-size: 16px;
	}

	.delivery input {
		border: 0;
		height: 1rem;
	}

	.delivery .spanphone {
		display: block;
		position: absolute;
		height: 1rem;
		line-height: 1rem;
		right: 5%;
		top: 0.25rem;
		font-size: 14px;
		border-left: 1px solid #e7e7e7;
		padding-left: 0.2rem;
	}

	.pass {
		position: absolute;
		padding: 0.15rem 0.2rem;
		right: 6%;
		top: 19%;
		color: #b0b0b0;
	}

	.footer {
		background: #fff;
		width: 100%;
	}

	.footer a {
		display: block;
		width: 90%;
		margin: 0 auto;
		margin-top: 0.5rem;
		color: #fff;
		text-align: center;
		height: 1rem;
		background: #D50B0A;
		line-height: 1rem;
		border-radius: 4px;
	}

	.delivery .iconfont {
		float: right;
		color: #ccc;
		font-size: 14px;
	}

	.deliverytab {
		width: 10rem;
		height: 9rem;
	}

	.delivery-th {
		margin-top: 0.4rem;
		color: #D50B0A;
	}

	.delivery-th span:first-child {
		float: left;
		margin-left: 5%;
	}

	.delivery-th span:last-child {
		float: right;
		margin-right: 5%;
	}

	.active {
		pointer-events: none;
	}

	.phone {
		color: #b0b0b0;
		background: #fff;
	}

	.yanpass {
		position: relative;
		top: 0.2rem;
	}

	.yanpass em {
		color: #b8b8b8;
		font-size: 18px!important;
	}

	.activeBtn {
		background: #EEEEEE!important;
		color: #d4d4d4!important;
		pointer-events: none;
	}
</style>
